<!-- 待办事项信息详情页 -->
<template>
	<view class="to-do-item-detail-box">
		<!-- 顶部内容区域 -->
		<view class="item-content-box">
			<view class="item-time">时间：{{(itemData.start_time || '') | getShowTime}}</view>
			<!-- 待开庭 场景中 还需显示 地址和阶段 的信息 -->
			<block v-if="!isToDoList">
				<view class="item-time">地址：{{itemData.address || ''}}</view>
				<view class="item-time">阶段：{{itemData.lawyer_trial_value || ''}}</view>
			</block>
			
			<view class="item-time"><text>内容：</text><text class="content">{{itemData.content}}</text></view>
			<view class="icon" v-if="itemData.remind">{{itemData.remind}}</view>
		</view>
		<!-- 案子信息区域 -->
		<view class="case-data-box">
			<view class="title">{{itemData.case_info.cause}}</view>
			<view class="user-box">
				<view>原告 <text class="name">{{itemData.case_info.plaintiff_name}}</text></view>
				<view>被告 <text class="name">{{itemData.case_info.defendant_name}}</text></view>
			</view>
			<view>
				<u-image width="52" height="56" :src="vuex_url + '/static/imgs/word.png'"></u-image>
			</view>
			<view class="imgs-box">
				<block v-for="(url, i) in itemData.files" :key="i">
					<u-image class="image-style" width="116" height="116" :src="url" @click="previewImageClick(i)"></u-image>
				</block>
			</view>
		</view>
		
		<!-- 底部编辑和删除按钮区域 -->
		<view class="btns-box">
			<view class="btn-item" @click="editClick">编辑</view>
			<view class="btn-item" style="background-color: #FF2E2E" @click="modelShow = true">删除</view>
		</view>
		<!-- 删除提示模态框 -->
		<!-- <u-modal v-model="modelShow" :content="modelTipText" :show-cancel-button="true" @confirm="defineDelete"></u-modal> -->
		<!-- 删除帖子的提示 -->
		<delete-model
			:show="modelShow"
			:tip="modelTipText"
			cancelText="取消删除"
			confirmText="确认删除"
			:rightColor="false"
			@cancel="modelShow = false"
			@confirm="defineDelete"
			@tap.stop
		></delete-model>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 待办事项的 id 由来源页传递过来动态获取页面数据
				id: null,
				isToDoList: false,
				modelShow: false,
				// 删除模态框的提示内容
				modelTipText: '',
				itemData: {},
			};
		},
		onLoad(options) {
			// console.log(options);
			this.id = options.id
			// 判断来源页是 “待开庭” 还是 “待办事项”
			if(options.isToDoList === 'true') {
				this.isToDoList = true		// 从 待办事项 进入
			} else {
				this.isToDoList = false		// 从 待开庭 进入
			}
			this.getData()
		},
		onShow() {
			// 判断是否需要刷新数据
			if(this.vuex_isSubmit) {
				this.getData()
				this.$u.vuex('vuex_isSubmit', false)
			}
		},
		methods: {
			getData() {
				// 判断来源页是 “待开庭” 还是 “待办事项”
				if(this.isToDoList) {	// 待办事项
					uni.setNavigationBarTitle({
						title: '待办信息'
					})
					this.modelTipText = '是否确认删除当前待办事项？'
					// 在此调用 获取待办事项数据 的方法
					this.getTodoListItemData()
				} else {	// 从 待开庭 进入
					uni.setNavigationBarTitle({
						title: '待开庭详情'
					})
					this.modelTipText = '是否确认删除此条待开庭数据？'
					// 在此调用 获取待开庭数据 的方法
					this.getPageData()
				}
				
			},
			// 获取待办事项的数据详情
			async getTodoListItemData() {
				const res = await this.$u.api.getTodoListItem({id: this.id})
				if(!res) return
				this.itemData = res
				console.log(res);
			},
			// 根据传递过来的参数获取页面数据
			async getPageData() {
				const res = await this.$u.api.getHoldCourtItem({id: this.id})
				if(!res) return
				this.itemData = res
				console.log(this.itemData);
			},
			// 编辑按钮的点击事件（携参跳转到“添加待办事项”页面）
			editClick() {
				this.$u.route(`/myPackageA/pages/views/add-to-do-item?id=${this.id}&isToDoList=${this.isToDoList}`)
			},
			// 模态框中的 确认删除 按钮的点击事件
			async defineDelete() {
				// TODO:执行后续删除业务逻辑
				if(this.isToDoList) {
					const res = await this.$u.api.delTodoListItem({id: this.id})
					if(!res) return
					// 删除成功后跳转到 “待办事项” 主页面
					this.$u.route({
						type: 'back'
					})
					this.$u.vuex('vuex_isSubmit', true)		// 告诉返回页需要刷新下数据了
					this.$u.toast('待办事项数据删除成功')
					return
				}
				// 删除 待开庭 的逻辑
				const res = await this.$u.api.delHoldCourtItem({id: this.id})
				if(!res) return
				// 删除成功后跳转到 “待办事项” 主页面
				this.$u.route({
					type: 'back'
				})
				this.$u.vuex('vuex_isSubmit', true)		// 告诉返回页需要刷新下数据了
				this.$u.toast('待开庭数据删除成功')
			},
			// 预览图片
			previewImageClick(index) {
				uni.previewImage({
					count: index,
					urls: this.itemData.files
				})
			}
			
		},
		filters: {
			// 把后台返回的 2022-03-05 14:00:00 格式的时间转换为 2022年03月05日 14:00 的格式
			getShowTime(time) {
				let str = ''
				if(!time) return
				time = time.replace(/-/, '年').replace(/-/, '月').replace(/ /, '日 ')
				let arr = time.split(' ')
				str = arr[0] + ' ' + arr[1].split(':')[0] + ':' + arr[1].split(':')[1]
				return str
			},
		}
	}
</script>

<style lang="scss" scoped>
	.to-do-item-detail-box {
		width: 750rpx;
		min-height: 100vh;
		background-color: $u-bg-color;
		padding: 20rpx 24rpx;
		.item-content-box {
			width: 100%;
			background-color: white;
			position: relative;
			padding: 30rpx 21rpx;
			.item-time {
				line-height: 46rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #141418;
				display: flex;
				.content {
					display: block;
					width: 85%;
					min-height: 100rpx;
				}
			}
			
			.icon {
				width: 59rpx;
				height: 59rpx;
				line-height: 59rpx;
				text-align: center;
				border: 1px solid #00C9B1;
				border-radius: 50%;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #00C9B1;
				position: absolute;
				top: 17rpx;
				right: 25rpx;
				overflow: hidden;
			}
		}
		.case-data-box {
			margin-top: 20rpx;
			width: 100%;
			background-color: white;
			padding: 24rpx 21rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			.title {
				font-size: 30rpx;
				color: #00C9B1;
				padding-bottom: 24rpx;
				border-bottom: 1px solid #E7EAF0;
			}
			.user-box {
				height: 144rpx;
				padding: 24rpx 0;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.name {
					margin-left: 35rpx;
				}
			}
			.imgs-box {
				margin: 20rpx 0rpx 0 0;
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				.image-style {
					margin: 0 0rpx 20rpx 19rpx;
					&:nth-child(1) {
						margin-left: 0;
					}
					&:nth-child(6) {
						margin-left: 0;
					}
					&:nth-child(11) {
						margin-left: 0;
					}
				}
			}
		}
		.btns-box {
			background-color: $u-bg-color;
			position: fixed;
			bottom: 40rpx;
			left: 0;
			width: 100%;
			height: 90rpx;
			padding: 0 24rpx;
			display: flex;
			justify-content: space-between;
			.btn-item {
				width: 336rpx;
				height: 100%;
				background: #00C9B1;
				border-radius: 10px;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>
